<style>
    .sortable-chosen {
        background-color: #55967E;
    }

    .seldatasource {
        cursor: pointer;
    }
</style>

<div class="rightcontent rc-bg-grey">
    <div class="rc-pagepadding">
        <div class=" rc-pannel ">
            <div class=" rc-pannel-header">
                <div class="rc-flex layui-form toolbar rc-flex-justify-between">
                    <div class=" rc-flex rc-flex-vertical-center rc-bold">
                        <i class="iconfont goback rc-pointer" style="margin-right: 5px;">&#xe62b;</i> 模型字段
                    </div>
                    <div>
                        <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm" id="addfield"><i class="iconfont">&#xe60e;</i> 添加字段</a>

                    </div>
                </div>


            </div>


            <div class="rc-pannel-body layui-form rc-pagepadding">

                <table class="layui-table" id="sort">
                    <colgroup>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col>
                        <col style="width: 180px;">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>字段名</th>
                            <th>字段</th>
                            <th>字段类型</th>
                            <th>元素控件</th>
                            <th>唯一?</th>
                            <th>必填?</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($fields as $field) {
                        ?>
                            <tr>
                                <td><?php echo $field['title'] ?></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>

                                    <a href="javascript:;" title="拖拽排序" class="drap" style="margin-right: 20px;cursor:move"> <i class="iconfont" style="font-size: 18px;">&#xe638;</i></a>
                                    <a href="javascript:;" title="编辑" class="editfield" fieldid="<?php echo $field['id'] ?>" style="margin-right: 20px;"> <i class="iconfont" style="font-size: 18px;"> &#xe61b;</i></a>
                                    <a href="javascript:;" title="删除" class="delfield" fieldid="<?php echo $field['id'] ?>"> <i class="iconfont" style="font-size: 18px;color:#970c0c">&#xe786;</i></a>

                                </td>
                            </tr>
                        <?php
                        } ?>
                    </tbody>
                </table>


            </div>
        </div>
    </div>
</div>
<script src="/static/admin/lib/Sortable/Sortable.min.js"></script>
<script>
    layui.use(function() {

        var layer = layui.layer;

        // 解决Sortable.create在火狐浏览器上会打开新窗口
        document.body.ondrop = function(event) {
            event.preventDefault();
            event.stopPropagation();
        }


        $("#addfield").click(function() {
            layer.open({
                type: 2, // page 层类型
                area: ['95%', '800px'],
                title: '添加字段',
                shade: 0.6, // 遮罩透明度
                shadeClose: false, // 点击遮罩区域，关闭弹层
                maxmin: true, // 允许全屏最小化
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: '/app/cms/admin/Model/addfield?modelid=<?php echo request()->get('modelid'); ?>'
            });
        });

        $(".editfield").click(function() {
            var fieldid = $(this).attr('fieldid');
            layer.open({
                type: 2, // page 层类型
                area: ['800px', '600px'],
                title: '编辑字段',
                shade: 0.6, // 遮罩透明度
                shadeClose: false, // 点击遮罩区域，关闭弹层
                maxmin: true, // 允许全屏最小化
                anim: 0, // 0-6 的动画形式，-1 不开启
                content: '/app/cms/admin/Model/editfield?fieldid=' + fieldid
            });
        });


        var sortable = new Sortable(document.querySelector('#sort tbody'), {
            animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
            dragClass: "sortable-drag", // 正在被拖拽中的css类名
            handle: '.drap', // handle's class
            // 列表单元拖放结束后的回调函数
            onEnd: function( /**Event*/ evt) {
                //可以写自己业务，其他的方法和参数参考文档：http://www.sortablejs.com/options.html 
                layer.load(2);
                var ids = '';
                $('.sortid').each(function(i, v) {

                    ids += $(this).val() + ',';
                });
                $.ajax({
                    url: '/admin/cnf/UserModel/sortInfoTableField', //请求路径
                    type: "POST", //请求方式
                    data: {
                        ids: ids
                    },
                    success: function(data) {
                        // datadicbox
                        if (data.code != 0) {
                            toastr_error(data.message);
                        }
                    },
                    error: function() {},
                    complete: function() {
                        layer.closeAll();
                    }
                });
            },
        });


    });
</script>